import { Link, useHistory } from 'react-router-dom'
import styles from './index.module.scss'
import { useEffect, useState, useRef } from 'react'
import { isAust } from '@/utils'
const NotFound = () => {
  const [count, setCount] = useState(5)
  const history = useHistory()
  const countRef = useRef(-1)

  // react组件的获取状态的特点，更新一次数据就重新创建一次组件，
  // 一直创建可以保存  只有在useRef  hook 的属性值钟保存要清除的timeId
  useEffect(() => {
    countRef.current = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)

    // 依赖数据是空数组，可回调销毁定时器
    return () => {
      clearInterval(countRef.current)
    }
  }, [])

  useEffect(() => {
    if (count === 0) {
      history.replace(isAust() ? '/home' : '/Login')
    }
  }, [count, history])
  return (
    <div className={styles.root}>
      <h1>对不起你访问的页面不存在~</h1>
      <h3>
        将在 {count} 秒钟后,跳转到首页(或者点击
        <Link to={isAust() ? '/home' : '/Login'}>首页</Link>
        跳转到首页)
      </h3>
    </div>
  )
}

export default NotFound
